<template>
    <div class="goodsInfo-container">
		<transition 
		@before-enter="beforeEnter"
		@enter="enter"
		@after-enter="afterEnter"
		>
			<div class="ball" v-show="ballFlag" ref="ball"></div>
		</transition>

        <!-- 商品轮播图 -->
        <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<swiper :lunbotuList="lunbotu" :isfull="false"></swiper>
					</div>
				</div>
		</div>
        <!-- 商品购买区域 -->
        <div class="mui-card">
				<div class="mui-card-header">{{ goodsInfo.title}}</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p class="price">
							市场价:<del>{{ goodsInfo.market_price }}</del>&nbsp;&nbsp;销售价:<span class="now_price">{{ goodsInfo.sell_price }}</span>
						</p>
						<p>购买数量：<numberBox @getCount="getSelectedCount" :max="goodsInfo.stock_quantity"></numberBox></p>
						<p>
							<mt-button type="primary" size="small" >立即购买</mt-button>
							<mt-button type="danger" size="small" @click="addToShopCar">加入购物车</mt-button>
						</p>
					</div>
				</div>
			</div>
        <!-- 参数区 -->
        <div class="mui-card">
				<div class="mui-card-header">商品参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>商品货号：{{ goodsInfo.goods_no}}</p>
						<p>库存情况：{{ goodsInfo.stock_quantity}}</p>
						<p>上架时间：{{ goodsInfo.add_time}}</p>
					</div>
				</div>
				<div class="mui-card-footer">
					<mt-button type="primary" size="large" plain @click="goDetails(id)">图文介绍</mt-button>
					<mt-button type="danger" size="large" plain @click="goComment(id)">商品评论</mt-button>
				</div>
			</div>
    </div>
</template>
<script>
import swiper from '../subcomponents/swiper.vue'
import numberBox from '../subcomponents/goodsInfo-numberBox.vue'
import goodsDetails from '../goods/GoodsDetails.vue'
import goodsComment from '../goods/GoodsComment.vue'


export default {
    data(){
		return {
			id:this.$route.params.id,
			lunbotu:[],
			goodsInfo:{},
			ballFlag: false,
			selectedCount:1
		}
	},
	created() {
		this.getlunbotu();
		this.getGoodsInfo();
	},
	methods:{
		getlunbotu(){
            this.$http.get("api/getthumimages/" + this.id).then((result) => {
                // console.log(result.body);
                if(result.body.status == 0 ){
					result.body.message.forEach(item =>{
						item.img = item.src
					})
                    this.lunbotu = result.body.message
                    // Toast('加载轮播图成功')
                } else {
                    Toast('加载轮播图失败')
            }
        })
		},
		getGoodsInfo(){
            this.$http.get('api/goods/getinfo/'+this.id).then(result => {
                if(result.body.status === 0){
                    // console.log(result.body)
                    this.goodsInfo = result.body.message[0] 
                }
            }

            )

		},
		goDetails(id){
			this.$router.push({ name:"goodsDetails", params: { id } })
		},
		goComment(id){
			this.$router.push({ name:"goodsComment", params: { id } })
		},
		addToShopCar(){
			this.ballFlag = !this.ballFlag
		},
		beforeEnter(el) {
			el.style.transform = "translate(0,0)";
		},
		enter(el,done){

			const ballPosition = this.$refs.ball.getBoundingClientRect();
			const badgePosition = document.getElementById('badge').getBoundingClientRect();
			const xDist = badgePosition.left - ballPosition.left;
			const yDist = badgePosition.top - ballPosition.top;
			el.style.transform = `translate(${xDist}px,${yDist}px)`;
			el.style.transition = 'all 1s cubic-bezier(0.1, 0.7, 1.0, 0.1)';
			done();
		},
		afterEnter(el){
			this.ballFlag = !this.ballFlag
		},
		getSelectedCount(count){
			this.selectedCount = count
			console.log(this.selectedCount)
		}
	},
	components:{
		swiper,
		numberBox,
		goodsDetails,
		goodsComment
	}
}
</script>
<style lang="scss" scoped>
.goodsInfo-container{
    background: #eee;
    overflow:hidden;
	.now_price{
		color: red;
		font-size: 14px;
		font-weight: bold;
	}
	.mui-card-footer{
		display: block;
		button{
			margin:15px 0;
		}
	}
	.ball{
		width: 15px;
		height: 15px;
		border-radius: 50%;
		position: absolute;
		background-color: red;
		z-index: 99;
		top: 409px;
		left: 75px;
	}

}

</style>